<template>
  <div class="yaoHome">
    <!-- 轮播 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="image in lunboList" :key="image.id">
        <img v-lazy="image.url" />
      </van-swipe-item>
    </van-swipe>
    <!-- 宫格nav -->
    <van-grid :column-num="4" :border="false">
      <van-grid-item
        v-for="item in navList"
        :key="item.id"
        :icon="item.icon"
        :text="item.text"
      />
    </van-grid>
    <!-- 亮健康App下载入口 -->
    <div>
      <img
        style="margin-top: 0.1rem; margin-bottom: -0.4rem; width: 100%"
        src="https://image.360lj.com/images/login2018/img/log/ljk/ljk.png"
        alt="亮健康App下载"
      />
    </div>
    <!--用药指导入口 start-->
    <div class="new_drugguide_ctn">
      <div class="new_drugguide">
        <a href="#"></a>
        <a href="#"></a>
      </div>
    </div>
    <!-- 特价区域 -->
    <div class="bargain_price">
      <div class="title_timelimit">
        <div>
          <i class="time-icon mdr_time"></i>
          <h3>限时特价</h3>
        </div>
        <!-- 倒计时 -->
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
    </div>
    <!-- //轮播图2 -->
    <swiper></swiper>
    <!-- 健康资讯 -->
    <health-information></health-information>
  </div>
</template>
<script>
import * as http from "@/api/home.js";
import swiper from "@/components/swiperItem.vue";
import healthInformation from "@/components/healthInformation.vue";
export default {
  components: {
    swiper,
    healthInformation,
  },

  data() {
    return {
      time: 24 * 23 * 45 * 1000,
      lunboList: "",
      navList: "",
    };
  },
  created() {
    this.getLunbo();
    this.getNav();
  },
  methods: {
    async getLunbo() {
      var res = await http.getLunbo();
      this.lunboList = res.data.swiperImg;
      console.log(this.lunboList);
    },
    async getNav() {
      var res = await http.getNav();
      this.navList = res.data.navItem;
      console.log(this.navList);
    },
  },
};
</script>
<style lang="scss">
.yaoHome {
  background-image: linear-gradient(-90deg, #d929a40c 0%, #276ace09 100%);
  padding-bottom: 1rem;
  // 轮播图
  .van-swipe__track {
    width: 100%;
    img {
      height: 4.1rem;
      background-size: 100% 100%;
    }
  }
  .van-swipe__indicator {
    width: 0.2rem;
    height: 0.2rem;
  }
  //宫格
  .van-grid {
    // box-shadow: rgba(233, 144, 12, 0.25) 0px 30px 60px -12px inset,
    //   rgba(139, 8, 8, 0.3) 0px 18px 36px -18px inset;
    padding: 0 0.08rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }
  //用药指导
  .new_drugguide_ctn {
    box-sizing: border-box;
    padding-bottom: 0.15rem;
    margin-top: 0.15rem;
    padding-top: 0.2rem;
    .new_drugguide {
      display: flex;
      height: 1.82rem;
      background: url(//image.360lj.com/2021/10/sg_m/fwt/yyzd.png) no-repeat;
      background-size: 100% 100%;
      a {
        display: inline-block;
        flex: 1;
      }
    }
  }
  //特价区域
  .title_timelimit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-image: linear-gradient(
      20deg,
      rgb(255, 255, 255) 20%,
      rgb(235, 7, 34) 100%
    );
    position: relative;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    height: 0.6rem;
    line-height: 0.6rem;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    i {
      display: block;
      position: absolute;
      top: 0.13rem;
      left: 0.1rem;
      width: 0.32rem;
      height: 0.32rem;
      background: url(//image.360lj.com/vshop/images/new/time_01.png) no-repeat;
      background-size: 0.28rem 0.28rem;
    }
    h3 {
      margin-left: 0.5rem;
    }
    .van-count-down {
      margin-right: 0.15rem;
    }
    .colon {
      display: inline-block;
      margin: 0 4px;
      color: #000000;
    }
    .block {
      display: inline-block;
      width: 22px;
      color: rgb(0, 0, 0);
      font-weight: bold;
      font-size: 12px;
      text-align: center;
      border-radius: 0.1rem;
      background-color: #f8f7f4;
    }
  }
}
</style>
